
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间统计</title>
<style>
#statusTable{
	margin: 20px auto;
	border-collapse: collapse;/* 边框合并属性  */
}
#statusTable th,#statusTable td {
	border: 1px solid #5F6F7E;
}
#statusTable th{
	text-align:center;
	font-weight: bolder;
}
#statusTable .textbox_short_white{
	text-align:left;
}

#primeNumTable{
margin: 20px auto;
}
#primeNumTable input{
width: 150px;
}

#explainDiv{
margin: 20px auto;
width: 600px;
}

</style>
</head>
<body onload="load()">
 
        <!-- <input type="hidden" id="statusCount" value="${fn:length(statusList)}"> -->  
        <input type="hidden" id="statusCount" value="0">
		<table id="statusTable">
		<tr> <th colspan="4"> 瀏覽器信息 </th>  </tr>
		<tr> <th colspan="2"> window.navigator.userAgent </th> <td colspan="2" id="status_userAgent" style="width: 400px;"> </td> </tr>
		<tr> <th colspan="2"> JScript 引擎版本号(限IE)</th> <td colspan="2" id="status_jsVersion"> </td> </tr>
		<tr> <th colspan="4"> 時間統計 </th></tr>
		<tr> <th> 狀態 </th> <th> 時間 </th> <th> 時間毫秒數 </th> <th> 距離上個狀態時差(單位秒) </th> </tr>
		
		<!-- 后台带入的时间 jsp方法 -->
<!-- 		<c:forEach var="s" items="${statusList}" varStatus="status">
				 <tr> <td><input id="status_${status.index}" class="textbox_short_white" readonly 
		              value="${s}" name="statusList[${status.index}]"/>  </td> 
		      <td> <input id="status_date_${status.index}" class="textbox_short_white" readonly/> </td> 
		      <td> <input id="status_time_${status.index}" class="textbox_short_white" readonly 
		              value="${dateList[status.index]}" name="dateList[${status.index}]"/> 
		      </td> 
		      <td> <input id="status_diff_${status.index}" class="textbox_short_white" readonly/>  
		      </td> 
		  </tr>
		</c:forEach> -->
 
		
		</table>
		
		
		<div id="explainDiv">素数计算
		计算下  5*<input id="trNum" value="4">个素数<input type="button" value="create" onclick="create()">
		<br>
		当前最大素数为<input id="maxPrimeNum" value="">
		当前素数个数为<input id="primeNumInp" value="">
		</div>
		
		<!-- 素数表格 -->
		<input type="hidden" >
		<table id="primeNumTable">
		<tr> 
		    <td>2</td><td>3</td>
		    <td>5</td><td>7</td>
		    <td>11</td><td>13</td>
		    <td>17</td><td>19</td>
		    <td>23</td><td>29</td>
		</tr>
		</table>
 
<script>

function load(){
	var statusCount = document.getElementById("statusCount");
	
	statusCount.value=0;//页面单纯的刷新原来的input值会带入 这里重置为0,正常流程是没有问题
	
	console.log("statusCount.value："+statusCount.value);
	
	statusNotes("页面加载完成");
	statusStatistics();
	statusNotes2("计算完成加载完成");
}

 
function statusStatistics(){
	
	document.getElementById("status_userAgent").innerHTML = window.navigator.userAgent;
	if(window.navigator.userAgent.indexOf("MSIE")>0 && 
			window.navigator.userAgent.indexOf("Trident")>0){//IE旧版是MSIE 新版是Trident
	 document.getElementById("status_jsVersion").innerHTML = ScriptEngineMajorVersion()
				+ "."
				+ ScriptEngineMinorVersion()
				+ "."
				+ ScriptEngineBuildVersion();
	}
	
	var statusCount = document.getElementById("statusCount").value;
	
	var preTime = Number(document.getElementById("status_time_0").value);
	var time ;
	var date = new Date();
	
	for(var i=0;i<statusCount;i++){
		time = Number(document.getElementById("status_time_"+i).value);
		
		date.setTime(time);
		document.getElementById("status_date_" + i).value = date.getMonth() + "/"
		        + date.getDate() + "  " + date.getHours() + ":" + date.getMinutes() + ":"
		 		+ date.getSeconds() + ":" + date.getMilliseconds();
		document.getElementById("status_diff_" + i).value= (time-preTime)/1000;
		preTime = time;
	}
	
	
}

/**
 * @param status 状态名
 * 插入目前时间 不计算与上次时间点的时间差
 */
function statusNotes(status){
	
	var statusCount = document.getElementById("statusCount");
	
	var statusTable = document.getElementById("statusTable");
	var row = statusTable.insertRow(statusTable.rows.length);//追加一行  
	
	var date = new Date();
	var rowString = "<td><input id='status_"+statusCount.value+"' class='textbox_short_white' readonly  value='"+status+"' name='statusList["+statusCount.value+"]'>  </td> " +
			    "<td> <input id='status_date_"+statusCount.value+"' class='textbox_short_white' readonly > </td> " +
				"<td> <input id='status_time_"+statusCount.value+"' class='textbox_short_white' readonly  value='"+date.getTime()+"' name='dateList["+statusCount.value+"]'> </td> " +
				"<td> <input id='status_diff_"+statusCount.value+"' class='textbox_short_white' readonly > </td> ";
	row.innerHTML = rowString; 
	//$("#statusTable").append("<tr>"+rowString+"</tr>");	
 
	statusCount.value = Number(statusCount.value)+1;
 
}

/**
 * @param status 状态名
 * 插入目前时间 并计算距离上次时间点的时间差
 */
function statusNotes2(status){
	
	var statusCount = document.getElementById("statusCount");
	
	var statusTable = document.getElementById("statusTable");
	var row = statusTable.insertRow(statusTable.rows.length); 
	
	var date = new Date();
	
	var dateString =  date.getMonth() + "/"
    + date.getDate() + "  " + date.getHours() + ":" + date.getMinutes() + ":"
		+ date.getSeconds() + ":" + date.getMilliseconds();
	var preTime = document.getElementById("status_time_"+(Number(statusCount.value)-1)).value;
 
	var rowString = "<td><input id='status_"+statusCount.value+"' class='textbox_short_white' readonly  value='"+status+"' name='statusList["+statusCount.value+"]'>  </td> " +
			    "<td> <input id='status_date_"+statusCount.value+"' class='textbox_short_white' readonly value='"+dateString+"' > </td> " +
				"<td> <input id='status_time_"+statusCount.value+"' class='textbox_short_white' readonly  value='"+date.getTime()+"' name='dateList["+statusCount.value+"]'> </td> " +
				"<td> <input id='status_diff_"+statusCount.value+"' class='textbox_short_white' readonly  value='"+(date.getTime()-preTime)/1000+"'> </td> ";
	row.innerHTML = rowString; 
	//$("#statusTable").append("<tr>"+rowString+"</tr>");	
	
	statusCount.value = Number(statusCount.value)+1;
}


/*****素数计算部分**************************************************************/
var primeNum =new Array(2,3,5,7,11,13,17,19,23,29);//素数数组
var primeIndex = 4;//表示为 6N+1 或 6N+5的n的值

function isPrime(num){
	var result = true;
	var sqrtNum = Math.sqrt(num);
	 
	for(var i=0;i<primeNum.length,primeNum[i]<=sqrtNum;i++){
		if(num%primeNum[i] == 0){//如果可以被整除
			result = false;
		    break;
		}
	}
	return result;
}

/**
 * 产生到count数目的素数
 */
function primeCreate(count){
	
	var num=0;
	if(6*primeIndex+5!=primeNum[primeNum.length-1]){
		num = 6*primeIndex+5;
		if(isPrime(num)){
			primeNum.push(num);
		}
	}
	
	while(primeNum.length<count){//小于目标个数
		primeIndex++;
		num = 6*primeIndex+1;
		if(isPrime(num)){
			primeNum.push(num);
		}
		if(primeNum.length>=count){
			break;
		}
		num = 6*primeIndex+5;
		if(isPrime(num)){
			primeNum.push(num);
		}
	
	}
	
}

function create(){
	
	statusNotes2("开始启动素数计算");
 
	var trNum = document.getElementById("trNum");
	var trNumVal=4;
	if(!isNaN(trNum.value)){
		trNumVal=Number(trNum.value);
	}
	var preL = primeNum.length;
	var postL = preL+trNumVal*10;
	primeCreate(postL);
	
	var table = document.getElementById("primeNumTable");
	var row = null;
	var rowStr = "";
	for(var i=0;i<trNumVal;i++){
		row = table.insertRow(table.rows.length); 
		rowStr = "<td>"+(primeNum[preL+10*i+0])+"</td><td>"+(primeNum[preL+10*i+1])+"</td>"
		        +"<td>"+(primeNum[preL+10*i+2])+"</td><td>"+(primeNum[preL+10*i+3])+"</td>"
		        +"<td>"+(primeNum[preL+10*i+4])+"</td><td>"+(primeNum[preL+10*i+5])+"</td>"
		        +"<td>"+(primeNum[preL+10*i+6])+"</td><td>"+(primeNum[preL+10*i+7])+"</td>"
		        +"<td>"+(primeNum[preL+10*i+8])+"</td><td>"+(primeNum[preL+10*i+9])+"</td>"
		        ;
		row.innerHTML = rowStr;
	}
	document.getElementById("maxPrimeNum").value=primeNum[postL-1];
	document.getElementById("primeNumInp").value=primeNum.length;
	
	
	statusNotes2(preL+" ~ "+postL+" 素数计算完成");
}
</script>
</body>
</html>